<template>
  <div class="add-route-demand">
    <mt-header title="发布路线需求" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>

    <div class="content-list">
      <Form ref="formDataView" :model="formData">
        <mt-cell
          class="cell"
          title="出发时间"
          @click.native="open('startTime')"
          :value="formData.startTime"
          is-link
        ></mt-cell>
        <mt-datetime-picker
          ref="startTime"
          type="datetime"
          year-format="{value} "
          month-format="{value} 月"
          date-format="{value} 日"
          hour-format="{value} 时"
          minute-format="{value} 分"
          @confirm="handleStartTime"
          v-model="pickerValue"
        ></mt-datetime-picker>

        <mt-cell
          class="cell"
          title="目的地"
          :value="formData.destName"
          @click.native="selectCityVisible = true"
          is-link
        ></mt-cell>
        <mt-popup v-model="selectCityVisible" position="bottom" class="select-city-popup">
          <mt-picker
            :slots="citySlot"
            :visible-item-count="5"
            :show-toolbar="true"
            @change="onAreaChange"
            value-key="name"
          >
            <mt-button size="small" type="primary" @click.native="confirmCity()">确定</mt-button>
            <mt-button plain size="small" @click.native="selectCityVisible = false">取消</mt-button>
          </mt-picker>
        </mt-popup>

        <mt-field class="cell" label="人数" placeholder="请填写" type="number" :value="formData.maxNum"></mt-field>

        <mt-cell class="cell" title="拼团玩">
          <mt-switch v-model="isShare" @change="isShareChange">
            <label>{{this.isShareLabel}}</label>
          </mt-switch>
        </mt-cell>
        <mt-field
          label="向导需求"
          placeholder="请填写"
          type="textarea"
          rows="4"
          v-model="formData.guideDemand"
        ></mt-field>
        <mt-field
          label="期望玩法"
          placeholder="请填写"
          type="textarea"
          rows="4"
          v-model="formData.playWay"
        ></mt-field>
        <mt-field label="必玩景点" placeholder="请填写" v-model="formData.necessaryAttraction"></mt-field>
        <mt-field label="预算范围(元)" placeholder="请填写数字" v-model="formData.budget"></mt-field>
        <mt-cell class="cell" title="用车与否">
          <mt-switch v-model="useCar" @change="uesCarChange">
            <label>{{this.useCarLabel}}</label>
          </mt-switch>
        </mt-cell>
        <mt-field label="联系方式" placeholder="请填写" v-model="formData.contact"></mt-field>
        <mt-field label="补充信息" placeholder="请填写" v-model="formData.note"></mt-field>
      </Form>
    </div>
    <div class="confirm-release">
      <div class="cancel" @click="$router.go(-1)">取消发布</div>
      <div class="release" @click="handleSave('formDataView')">确认发布</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Toast, Radio, Switch } from "mint-ui";
import { formatDatetime } from "@/libs/util.js";
export default {
  name: "add-route-demand",
  data() {
    // const validate = (rule, value, callback) => {
    //   if (value === "" || !value) {
    //     callback(new Error("该项不能为空"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      formData: {
        startTime: "",
        destId: "",
        destName: "",
        maxNum: "",
        isShare: "",
        guideDemand: "",
        playWay: "",
        necessaryAttraction: "",
        budget: "",
        useCar: "",
        contact: "",
        note: "",
        type: "0",
        creator: this.$store.state.user.id
      },
      pickerValue: new Date(),
      selectCityVisible: false,
      areas: {},
      cityId: "",
      cityName: "",
      citySlot: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: ['北京'],
          className: "slot3",
          textAlign: "center"
        }
      ],
      isShare: true,
      isShareLabel: "是",
      useCar: false,
      useCarLabel: "否"
    };
  },
  methods: {
    getAreas() {
      axios.get("/api/area/areaList").then(res => {
        if (res.data.status == 1) {
          this.areas = res.data.data;
          console.log(Object.keys(this.areas));
          this.citySlot[0].values = Object.keys(this.areas);
        }
      });
    },
    onAreaChange(picker, values) {
      picker.setSlotValues(1, this.areas[values[0]]);
      this.destId = values[1].id;
      this.destName = values[1].name;
    },
    confirmCity() {
      this.formData.destId = this.destId;
      this.formData.destName = this.destName;
      this.selectCityVisible = false;
      console.log(this.formData);
    },
    open(picker) {
      this.$refs[picker].open();
    },
    handleStartTime(val) {
      console.log(val.toString());
      var date = new Date(val);
      this.formData.startTime = formatDatetime(val);
      console.log(this.formData.startTime);
      // this.formData.startTime = moment(val.getTime()).format('yyyy-mm-dd');
    },
    isShareChange() {
      if (this.isShare) {
        this.formData.isShare = "1";
        this.isShareLabel = "是";
      } else {
        this.formData.isShare = "0";
        this.isShareLabel = "否";
      }
    },
    uesCarChange() {
      if (this.useCar) {
        this.formData.useCar = "1";
        this.useCarLabel = "是";
      } else {
        this.formData.useCar = "0";
        this.useCarLabel = "否";
      }
    },
    handleSave(name) {
      if (!this.verify.flag) {
        Toast(this.verify.msg);
        return;
      }
      axios.post("/api/route/edit", this.formData).then(res => {
        if (res.data.status == 1) {
          this.$router.go(-1);
          Toast({
            message: "操作成功"
            // iconClass: "icon icon-success"
          });
        } else {
          Toast("操作失败");
        }
      });
    }
  },
  created() {
    this.options2 = [
      {
        label: "是",
        value: "1"
      },
      {
        label: "否",
        value: "0"
      }
    ];

    this.getAreas();
  },
  computed: {
    verify: function() {
      if (this.formData.startTime == null || this.formData.startTime == "") {
        return { flag: false, msg: "请填写出发时间" };
      }
      // if(this.formData.destCity == null || this.formData.destCity == "") {
      //   return { flag: false, msg: "请选择目的地" };
      // }
      if (!/^[0-9]*$/.test(this.formData.maxNum)) {
        return { flag: false, msg: "请正确填写数字" };
      }
      // if (this.pwd.length < 6 || this.pwd.length > 16) {
      //   return { flag: false, msg: "密码长度在6-16个字符之间" };
      // }
      // if (this.pwd != this.pwd2) {
      //   return { flag: false, msg: "两次输入的密码不一致" };
      // }
      // if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.email)) {
      //   return { flag: false, msg: "请填写有效的邮箱" };
      // }
      // if (!this.consent) {
      //   return { flag: false, msg: "请勾选[同意服务条款]" };
      // }
      return { flag: true, msg: "ok" };
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/style/variable.styl';

.add-route-demand {
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 55px;

  .confirm-release {
    height: 55px;
    z-index: 999;
    display: flex;
    line-height: 55px;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;

    .cancel {
      flex: 1;
      background-color: #efefef;
    }

    .release {
      flex: 1;
      background-color: $themeColor;
      color: #fff;
    }
  }

  .select-city-popup {
    width: 100%;

    .picker-slot-wrapper, .picker-item {
      backface-visibility: hidden;
    }

    .picker-toolbar {
      background-color: #eee;
    }

    >>> button {
      float: right;
      margin: 3px 10px 0 0;
    }
  }
}
</style>